<?xml version="1.0" encoding="UTF-8" ?>

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0">
	<jsp:directive.page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" />
	<jsp:output doctype-root-element="html" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
		doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" omit-xml-declaration="true" />
	<html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core"
		xmlns:form="http://www.springframework.org/tags/form">
<head>
<link href="/sports/resources/css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">
<!-- required for some browsers -->
	
</script>
<!-- <script type="text/javascript" href="//code.jquery.com/jquery-2.1.0.min.js"> -->
<!-- required for some browsers -->

<script type="text/javascript" href="/sports/resources/js/jquery-ui-1.10.4.custom.min.js">
<!-- required for some browsers -->
	
</script>


<title>Coach</title>
</head>
<body>

	<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
	<h2>${team }</h2>
	<h2>${team.name }</h2>

	<div id="team">
		<TABLE>
			<tr>
				<td>Name</td>
				<td>${team.name }</td>
			</tr>
			<tr>
				<td>Gender</td>
				<td>${team.gender }</td>
			</tr>
			<tr>
				<td>Division</td>
				<td>U10 need to fix this to be many to one</td>
			</tr>
		</TABLE>

	</div>

	<div id="players">
		<form:form commandName="personTeamMapping" id="addplayer" action="/sports/rest/${team.id}/players" method="POST">

			<table border="1" id="playerTable">
				<c:forEach var="personMapping" items="${team.personTeamMappings }">
					<tr id="playerRowMapping_${personMapping.person.id }">
						<td>Name: <c:out value="${personMapping.person.id }" /></td>
						<td>${personMapping.person.firstName}</td>
						<td>Last Name:</td>
						<td><c:out value="${personMapping.person.lastName}" /></td>
						<td>Email:</td>
						<td><c:out value="${personMapping.person.email }" /></td>
						<!-- TODO 						IF YOU HAVE THE PROPER PERMISSION THEN THIS WILL APPEAR -->
						<td><button id="removeUserButton" onclick="deletePlayer(${personMapping.person.id})">Delete</button></td>
					</tr>
				</c:forEach>

				<!-- TODO need to fix this so that only players return (where role = P and add a section above for coaches) -->
				<!-- 				<form:input path="role" /> -->
				<tr id="addPlayerRow">
					<td>First Name:</td>
					<td><form:input path="person.firstName" /></td>

					<td>Last Name:</td>
					<td><form:input path="person.lastName" /></td>
					<td>Email:</td>
					<td><form:input path="person.email" /></td>
					<td><input type="submit" value="Save Changes" /></td>
				</tr>
			</table>
		</form:form>
	</div>

	<script type="text/javascript">
		// this is the id of the form
		
		function deletePlayer(playerid){
			$.ajax({
				type : "DELETE",
				beforeSend : function(request) {
					request.setRequestHeader("X-CSRF-TOKEN", "${_csrf.token}");
				},
				url : "/sports/rest/${team.id}/players/" + playerid,
				success : function(data) {
					//alert(data); // show response from the php script.
					$("#playerRowMapping_" + playerid).remove();
				} ,error:function(data){
					alert(data);
				}
			});
		}

		var form = $("#addplayer");
		// 		var formclone = form.clone();

		var field = "";

		form.submit(function(ev) {

			var personMapping = new Object();
			var person = new Object();
			person.firstName = $("#person\\.firstName").val();
			person.lastName = $("#person\\.lastName").val();
			//clear the values now for the next input
			$("#person\\.firstName").val("");
			$("#person\\.lastName").val("");

			personMapping.person = person;
			personMapping.role = "P";
			console.log(JSON.stringify(personMapping))
			$.ajax({
				type : "POST",
				beforeSend : function(request) {
					request.setRequestHeader("X-CSRF-TOKEN", "${_csrf.token}");
				},
				url : form.attr('action'),
				contentType : 'application/json',
				data : JSON.stringify(personMapping), // serializes the form's elements.
				success : function(data) {
					//alert(data); // show response from the php script.
					$("#addPlayerRow").before(
							"<tr><td>Name</td><td>" + person.firstName
									+ "</td><td>Last Name:</td><td>"
									+ person.lastName
									+ "</td><td>Email: </td><td>"
									+ person.email + "</td></tr>");

				}
			});
			ev.preventDefault();
		});
	</script>
</body>
	</html>
</jsp:root>